<template>
  <div class="zuida">
    <div class="topbig">
      <p class="cha">&emsp;&emsp;查询</p>
      <div class="sou">
        &emsp;&emsp;&emsp;&emsp;搜索&emsp;<el-input
          v-model="input"
          placeholder="输入菜品名称进行搜索"
          class="shuru" @blur="mohusousuo()"></el-input>
        <!-- &emsp;
        筛选&emsp;
       <el-select v-model="select" slot="prepend" placeholder="全部">
       <el-option label="全部" value="1"></el-option>
       <el-option label="库存超出" value="2"></el-option>
       <el-option label="库存过低" value="3"></el-option>
       </el-select> -->
      </div>
    </div>
    <p class="caipin">&emsp;&emsp;菜品库存</p>
    <div class="bottombig">
      <div class="left">
        <p class="p1">菜品类别</p>
        <p @click="chaocai">炒菜</p>
        <p @click="liangcai">凉菜</p>
      </div>
      <div class="you">

        <el-table :data='tableData' border style="width: 100%">
          <el-table-column prop="foodId" label="菜品编号"> </el-table-column>
          <el-table-column prop="foodName" label="菜品名称"></el-table-column>
          <el-table-column prop="foodUnit" label="菜品单位"></el-table-column>
          <el-table-column prop="foodNum" label="库存"></el-table-column>
          <el-table-column prop="foodDate" label="盘点时间"></el-table-column>
          <el-table-column prop="" label="操作">
            <el-button @click="xiugaikucun()">修改库存</el-button>
          </el-table-column>
        </el-table>


        <div id="xiugaikucun" v-show="bool">
          <div class="kucuntop">修改</div>
          <div class="kuncuncenter">
            库存数量：<input type="text" v-model="kucun" />
          </div>
          <div class="kucunbottom"> 
           
            <button @click="kucunqueding()">确定</button>
            <button @click="kucunquxiao()">取消</button>
            
             
          </div>
        </div>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { findAllFoodByLimit, updatefoodnum,findlikelimit,findbylimitAndsort} from "@/apis/ningsh/ningsh.js";
export default {
  data() {
    return {
      kucun: "",
      input: "",
      select: "",
      tableData: [{}],
      // tableDatab: [{}],
      currentPage: 1,
      bool: false,
      caipingId: "",
      pageSize:5,
    total:0,
    };
  },
  methods: {
    render() {
      findAllFoodByLimit().then((ok) => {
        console.log(ok);
        // this.tableData = ok.data.data.records;
        // this.tableDatab=ok.data.data.records
        this.tableData=ok.data.data.records.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
        //  this.total=this.tableDatab.length
        this.total=ok.data.data.total

        let [caiping] = this.tableData;
        this.caipingId = caiping.foodId;
      });
    },
    mohusousuo(){
      //input模糊查询
        findlikelimit(this.input).then((ok)=>{
          console.log(ok);
          this.tableData=ok.data.data.records
          
        })
    },
    chaocai() {
      findbylimitAndsort(1).then((ok)=>{
        console.log(ok);
        this.tableData=ok.data.data[0].foodList
        this.total=this.tableData.length
        
      })
    },
    liangcai() {
      findbylimitAndsort(2).then((ok)=>{
        console.log(ok);
        this.tableData=ok.data.data[0].foodList
        this.total=this.tableData.length
        
      })
    },
    xiugaikucun() {
      this.bool = true;
    },
    
    kucunqueding() {
      //修改库存
      updatefoodnum(this.kucun, this.caipingId).then((ok) => {
        console.log(ok);


        this.render();
      });
      this.bool = false;
    },
    kucunquxiao() {
      this.bool = false;
    },
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      this.pageSize=val
       findAllFoodByLimit().then((ok) => {
        console.log(ok);
        // this.tableData = ok.data.data.records;
        this.tableData=ok.data.data.records.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
         

        // let [caiping] = this.tableData;
        // this.caipingId = caiping.foodId;
      });
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val
       findAllFoodByLimit().then((ok) => {
        console.log(ok);
        // this.tableData = ok.data.data.records;
        this.tableData=ok.data.data.records.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
         

        // let [caiping] = this.tableData;
        // this.caipingId = caiping.foodId;
      });
    },
  },
  //初始页面渲染
  mounted() {
    this.render();
  },
};
</script>
  
  <style scoped>
.topbig {
  width: 100%;
  height: 145px;
  border: 1px solid #ccc;
}
.cha {
  display: flex;
  align-items: center;
  height: 45%;
  background-color: #ccc;
}
.sou {
  font-size: 10px;
  height: 55%;
  display: flex;
  align-items: center;
}
.shuru {
  width: 300px;
}

.caipin {
  display: flex;
  align-items: center;
  height: 60px;
  background-color: #ccc;
  margin-top: 10px;
}
.bottombig {
  display: flex;
}
.left {
  
  width: 250px;
  height: 150px;
  margin-top: 10px;
  flex-direction: column;
}
.left > p {
  height: 50px;
  width: 100%;
  line-height: 50px;
  margin: auto;
  border: 1px solid black;
  text-align: center;
}
.p1 {
  width: 100%;
  text-align: center;
  background-color: #ccc;
}
.el-table {
  margin-top: 10px;
}
.you {
  width: 77%;
  margin-left: 20px;
 
}
#xiugaikucun {
  width: 200px;
  height: 150px;
  background-color: #eeecec;
  position: fixed;
  /* bottom: 100px;
  left: 560px; */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border: 2px solid blue;
}
.kucuntop {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.kucunbottom {
  display: flex;
  margin-top: 30px;
  justify-content: space-evenly;
  align-items: center;
}
</style>